<template>
  <div class="system-dic-container">
    <el-card shadow="hover">
      <div class="system-user-search mb15">
        <el-form :model="tableData.param" ref="queryRef" :inline="true" label-width="68px">
          <el-form-item label="标题" prop="title">
            <el-input v-model="tableData.param.title" placeholder="请输入标题" clearable size="default"
                      @keyup.enter.native="dataList" />
          </el-form-item>
          <!--          <el-form-item label="状态" prop="status" style="width: 200px;">
            <el-select
                v-model="tableData.param.status"
                placeholder="状态"
                clearable
                size="default"
                style="width: 240px"
            >
              <el-option label="启用"  :value="0"/>
              <el-option label="禁用"  :value="1"/>
            </el-select>

          </el-form-item>-->
          <el-form-item>
            <el-button size="default" type="primary" class="ml10" @click="dataList">
              <el-icon>
                <ele-Search />
              </el-icon>
              查询
            </el-button>
            <el-button size="default" @click="resetQuery(queryRef)">
              <el-icon>
                <ele-Refresh />
              </el-icon>
              重置
            </el-button>
            <!--            <el-button size="default" type="success" class="ml10" @click="addEmail">
              <el-icon>
                <ele-FolderAdd />
              </el-icon>
              新增邮件
            </el-button>-->
          </el-form-item>
        </el-form>
      </div>
      <el-table :data="tableData.data" style="width: 100%">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="id" align="center" prop="id" />
        <el-table-column label="标题" align="center" prop="title" :show-overflow-tooltip="true" />
        <el-table-column label="模板" align="center" prop="setPath" :show-overflow-tooltip="true" />
        <el-table-column label="缩略图" align="center" prop="thumbnail" :show-overflow-tooltip="true">
          <template #default="scope">
            <el-image style="width: 120px; height: 80px" :src="scope.row.thumbnail" />
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center" prop="status" :show-overflow-tooltip="true">
          <template #default="scope">
            <el-tag type="success" v-if="!scope.row.status">启用</el-tag>
            <el-tag type="info" v-else>禁用</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" align="center" prop="createdAt" width="110" />
        <el-table-column label="操作" width="180">
          <template #default="scope">
            <!--            <el-button size="small" type="text" @click="onOpenEditDic(scope.row)">编辑</el-button>-->
            <!--            <el-button size="small" type="text" v-if="!scope.row.status" @click="onDelete(scope.row)">禁用</el-button>-->
            <!--            <el-button size="small" type="text" v-else @click="onOpen(scope.row)">启用</el-button>-->
            <el-button size="small" type="text" v-if="!scope.row.status" @click="onPreview(scope.row)">预览</el-button>
            <el-button size="small" type="text" v-if="!scope.row.status" @click="onSetting(scope.row)">编辑</el-button>
            <el-button size="small" type="text" v-if="!scope.row.status" @click="onPost(scope.row)">发送</el-button>

          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="tableData.total>0" :total="tableData.total" v-model:page="tableData.param.pageNum"
                  v-model:limit="tableData.param.pageSize" @pagination="dataList" />
    </el-card>
    <EmailPost ref="emailPostRef" @row="state.emailId" />

  </div>
</template>

<script lang="ts" setup>
import { useRoute, useRouter } from 'vue-router';
import { toRefs, reactive, onMounted, ref, defineComponent, unref, getCurrentInstance } from 'vue';
import { ElMessageBox, ElMessage, FormInstance } from 'element-plus';
import { addEmailTmpList, deleteEmailTmp, getEmailTmpList, openEmailTmp } from '/@/api/system/mailtmp';
import EmailPost from '/@/views/system/mailtmp/component/post.vue';

// 定义接口来定义对象的类型
interface TableDataRow {
	id: number;
	title: string;
	setPath: string;
	category: number;
	thumbnail: string;
	parameter: string;
	content: string;
	status: number;
	createdAt: string;
}

interface TableDataState {
	ids: number[];
	tableData: {
		data: Array<TableDataRow>;
		total: number;
		loading: boolean;
		param: {
			pageNum: number;
			pageSize: number;
			title: string;
			status: string;
			dateRange: string[];
		};
	};
}

const route = useRoute();
const queryRef = ref();
const router = useRouter();
const emailPostRef = ref();

const state = reactive({
	ids: [],
	tableData: {
		data: [],
		total: 0,
		loading: false,
		param: {
			dateRange: [],
			title: '',
			status: '',
			pageNum: 1,
			pageSize: 10,
		},
	},
	emailId: 0,
});

const { tableData, ids } = toRefs(state);

function initTableData() {
	dataList();
}

function dataList() {
	getEmailTmpList(state.tableData.param).then((res: any) => {
		state.tableData.data = res.data.list;
		state.tableData.total = res.data.total;
	});
}

const resetQuery = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.resetFields();
	dataList();
};

function onDelete(row: TableDataRow) {
	deleteEmailTmp(row.id).then((res: any) => {
		ElMessage.success('禁用邮件模板');
		initTableData();
	});
}

function onOpen(row: TableDataRow) {
	openEmailTmp(row.id).then((res: any) => {
		ElMessage.success('启用邮件模板');
		initTableData();
	});
}

function onOpenEditDic(row: TableDataRow) {
	router.push({ path: '/system/mailtmp/add', query: { id: row.id } });
}

function addEmail() {
	router.push({ path: '/system/mailtmp/add' });
}

function onPreview(row: TableDataRow) {
	let href = import.meta.env.VITE_API_URL + '/view/emailtmp/show?id=' + row.id;
	window.open(href, '_blank');
}

function onSetting(row: TableDataRow) {
	router.push({ path: row.setPath, query: { id: row.id } });
}

//跨页面调用
function onPost(row: TableDataRow) {
	emailPostRef.value.openDialog(row.id);
}

onMounted(() => {
	initTableData();
});
</script>
